<template>
    <div class='c-main' @click="toTop">
        <Icon type="ios-send-outline" :size='36'/>
        TOP
    </div>
</template>
<script>
export default {
    methods:{
        toTop(){
            var topp = document.documentElement.scrollTop;
            var intval = setInterval(()=>{
                scrollTo(0,topp-=20);
                if(topp<0){
                    clearInterval(intval);
                }
            },10);
        }
    }
}
</script>
<style lang="less" scoped >
    .c-main{
        width: 60px;
        height: 60px;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        background-color:rgb(243, 97, 72);
        border: 2px rgb(252, 83, 54) solid;
        border-radius: 11px;
        box-shadow:rgba(177, 44, 44, 0.667) 1px 1px 2px;
        &:hover {
            color: rgb(243, 97, 72);
            background-color:#fff;
        }
    }
</style>
